<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%String basePath = request.getContextPath();%>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,html {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "微软雅黑";
}

#orderDistributionMap {
	width: 100%;
	height: 100%;
}

p {
	margin-left: 15px;
	font-size: 14px;
}
</style>
<title>订单分布统计</title>
</head>
<body>
     <div style="font-size:12px">
       <b>订单类型：</b>
          <input type="checkbox" name="orderType" value="0" />普通订单    
		  <input type="checkbox" name="orderType" value="1" />企业订单
		  <input type="checkbox" name="orderType" value="2" />试吃订单 
		  <input type="checkbox" name="orderType" value="3" />免费订单    
		  <input type="checkbox" name="orderType" value="4" />B2B订单
		  &nbsp;&nbsp;&nbsp;&nbsp; 
		  <input id="btnOperate" type="button" value="确 定" onclick="checkOrderTypeFun()"/>
     </div>
	<div id="orderDistributionMap"></div>
</body>
</html>
<script>
    var __ctxPath = "<%=request.getContextPath()%>";
</script>
<script type="text/javascript">
   function createMap(){//创建地图
	   var map = new BMap.Map("orderDistributionMap");
	   map.centerAndZoom(new BMap.Point(121.502084, 31.252977),12);//设置地图中心点坐标以及地图大小级别
	   window.map = map;//将map变量存储在全局
   }
   
   function setMapEvent(){//设置事件
	   map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
       map.enableScrollWheelZoom();//启用地图滚轮放大缩小
       map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
       map.enableKeyboard();//启用键盘上下左右键移动地图
   }
   
   function  addMapControl(){//添加控件
	   //添加比例尺
	   map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // 左上角，添加比例尺       
	   map.addControl(new BMap.NavigationControl()); //左上角，添加默认缩放平移控件    
	   map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));//右上角，仅包含平移和缩放按钮 
   }
   
   function addMapPoint(orderTypes){//添加地址标记
	   $.ajax({  
           url:__ctxPath + "/statisticManager/selectAllOrderAddressPoint",   //接收页面  
           type: 'post',      //POST方式发送数据  
         //  async: false,      //ajax同步  
           data: {orderTypes:orderTypes},
           success: function(result) {  
             var jsonData = JSON.parse(result);
             if(jsonData.success){
            	 var orderList=jsonData.list;
            	 for(var i=0; i<orderList.length; i++) { 
            		 var orderData=orderList[i];
            		 var longitude=orderData.longitude;
            		 var latitude=orderData.latitude;
            		 var orderType=orderData.orderType;
            		 var icon = new BMap.Icon(getBaiduMapIcon(orderType), new BMap.Size(19, 25)); //显示图标大小
            		  var maker = addMarker(new window.BMap.Point(longitude, latitude), i,icon);
            		  addInfoWindow(maker, orderData, i);   
            	 }
             }
           }  
       });  
   }
  
   function addMarker(point, index,picIcon) {//添加标注  
       var marker = new BMap.Marker(point,{icon:picIcon});  
       map.addOverlay(marker);  
       return marker;  
   }  
   
   function addInfoWindow(marker, poi) {//添加信息窗口  
       //pop弹窗标题  
       var title = '<div style="font-weight:bold;color:#0A8021;font-size:14px">' +PmsUtil.OrderType(poi.orderType)+ '</div>';  
       //pop弹窗信息  
       var html = [];  
       html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');  
       html.push('<tr>');  
       html.push('<td style="vertical-align:top;line-height:16px;width:42px;white-space:nowrap;word-break:keep-all"><b>订单编号: </b></td>');  
       html.push('<td><p>' + poi.orderCode + '</p></td>');  
       html.push('</tr>');
       html.push('<tr>');  
       html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all"><b>地址:</b></td>');  
       html.push('<td style="vertical-align:top;line-height:16px">' + poi.consignAddress + ' </td>');  
       html.push('</tr>');  
       html.push('</tbody></table>');  
       html.push('<div><a style="text-decoration:none;color:#2679BA;float:right;cursor: hand;cursor: pointer;"  onClick="lookDistribOrderDetail(\''+ poi.id + '\')">详情>></a></div>');
       var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });  
       var openInfoWinFun = function () {  
           marker.openInfoWindow(infoWindow);  
       };  
       marker.addEventListener("click", openInfoWinFun);  
       marker.addEventListener("mouseover", function(){
    	   marker.openInfoWindow(infoWindow);
    	});
       return openInfoWinFun;  
   }  
   
   function getBaiduMapIcon(orderType){//根据订单类型获取不同icon
	   if(orderType==0){//普通订单
		   return __ctxPath+"/images/mapIcon/red.png";  
	   }else if(orderType==1){//1:企业订单
		   return __ctxPath +"/images/mapIcon/bule.png";  
	   }else if(orderType==2){//2:试吃订单
		   return __ctxPath +"/images/mapIcon/greed.png";  
	   }else if(orderType==3){//3:免单订单
		   return __ctxPath +"/images/mapIcon/purple.png";    
	   }else if(orderType==4){//4：B2B订单
		   return __ctxPath +"/images/mapIcon/pink.png";  
	   }else{
		   return __ctxPath +"/images/mapIcon/black.png"; 
	   }
   }
   
   function initMap(orderTypes){//创建和初始化地图函数：
       createMap();//创建地图
       setMapEvent();//设置地图事件
       addMapControl();//向地图添加控件
       addMapPoint(orderTypes);//添加订单地址标记
   }
   
   initMap();//初始化地图
   
   
   function lookDistribOrderDetail(id) {
		var centerPanel = App.getContentPanel();
		var tab = centerPanel.getItem(PmsUtil.ORDER_MESSAGE_DETAIL);
		var createNewTab = new CreatNewTab(PmsUtil.ORDER_MESSAGE_DETAIL, '订单详情');
		if (tab == null) {
			createNewTab.createNew(tab);
		} else {
			createNewTab.createOld(tab, ['lookOrderDetailFields',
							'lookOrderDetailForm', 'lookOrderDetailGrid']);
		}
		Ext.Loader.load([__ctxPath + '/js/order/orderDetail.js'], function() {
					Ext.getCmp("centerTabPanel").getActiveTab().add(
							lookOrderDetailSearch(id), orderDetailGrid(id));
					Ext.getCmp("centerTabPanel").getActiveTab().doLayout();
				});
	}
   
//获取选中的订单类型
function checkOrderTypeFun(){
	   var  orderTypeArray=document.getElementsByName("orderType");
	   var  orderTypes='';
	   var m = 0;
	   for(var i=0;i<orderTypeArray.length;i++){
	         if(orderTypeArray[i].checked){
				if (m > 0) {
					orderTypes = orderTypes + "," + orderTypeArray[i].value;
				} else {
					orderTypes = orderTypeArray[i].value;
				}
				m++;
	       }
	    }
	   if(orderTypes==''){
		   Ext.MessageBox.show({
				title : "错误提示",
				msg : "请选择订单类型!",
				buttons : Ext.MessageBox.OK,
				icon : Ext.MessageBox.ERROR
			});
		   return;
	   }
	   initMap(orderTypes);//初始化地图 
   }
</script>
